<template>
  <div class="goodsPicWrapper">
    <swiper :options="swiperOption">
        <swiper-slide v-for="(item, index) in pic" :key="index">
          <div :style="{ paddingBottom: paddBom }" class="img-holder"><img class="obj-cover" :src="item"></div>
        </swiper-slide>
        <div class="swiper-pagination page-nub" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  props: {
    pic: {
      type: Array,
      default: () => {
        return []
      }
    },
    paddBom: {
      type: String
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOption: {
        notNextTick: true,
        pagination: '.swiper-pagination',
        paginationType : 'fraction',
        paginationClickable: true,
        loop: true,
        autoplay: 4000,
        autoplayDisableOnInteraction: false      
      },
      nowPage: 0
    }
  },
  mounted () {
 
  }
}
</script>

<style>
.goodsPicWrapper {
  position: relative;
}
.img-holder {
  position: relative;
}
.swiper-pagination {
  bottom: 3px !important;
}
.swiper-pagination-bullet {
  border: 1px solid #fff;
  opacity: 1 !important;
  margin: 0 3px !important;
  background: transparent !important;
}
.swiper-pagination-bullet-active {
  background: #fff !important;
}
.page-nub {
  position: absolute;
  bottom: 15px !important;
  right: 15px;
  left: auto !important;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, .3);
  border-radius: 100%;
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  z-index: 99;
}
</style>
